/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <div class="content">
    <div class="content-bg">
      <div class="top">
        <div class="left">
          <b class="time">2018年<i class="iconfont icon-arrow-bottom"></i></b>
          <b class="area">伍家岗<i class="iconfont icon-arrow-bottom"></i></b>
        </div>
        <div class="middle">伍家岗智慧征收数据管理平台</div>
        <div class="right">2017年06月15日   星期四</div>
      </div>
      <div class="main">
        <div class="left">
          <Item></Item>
          <Item></Item>
          <Item></Item>
        </div>
        <div class="middle">
          <Map></Map>
        </div>
        <div class="right">
          <Item></Item>
          <Item></Item>
          <Item></Item>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Map from "./Map";
import Item from "./Item";

export default {
  data() {
    return {};
  },
  components: {
    Map,
    Item
  }
};
</script>

<style lang='less' scoped>
@import "../../utils/theme.less";
@topHeight: 11%;
@topPadding: 2%;

.content {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  position: relative;
  background-image: url("../../assets/img/bg5.png");
  background-repeat: no-repeat;
  // background-size: cover;
  background-size: 100% 100%;
  color: @d-white;
}
.content-bg {
  width: 100%;
  height: 100%;
}
.top {
  height: @topHeight;
  width: 100%;
  // padding: @topPadding;
  box-sizing: border-box;
  overflow: hidden;
  background: rgba(0, 183, 229, 0.1);
  background-image: url("../../assets/img/border-bottom.png");
  background-position-x: center;
  background-position-y: bottom;
  background-repeat: no-repeat;
  background-size: 100% 0.6vw;
  display: flex;
  .left {
    float: left;
    width: 25vw;
    display: flex;
    justify-content: center;
    align-items: center;
    b {
      padding: 0.5vw 1vw;
      display: inline-block;
      vertical-align: middle;
      .out-frame(@d-primary, @d-primary, 2px, 0.5vw);
      font-size: 1.3rem;
      font-weight: bold;
      &:first-child {
        margin-right: 1vw;
        margin-left: 1vw;
      }
      i {
        color: @d-primary;
        margin-left: 0.5vw;
        font-size: 1.3rem;
      }
    }
  }
  .middle {
    flex: 1;
    text-align: center;
    font-size: 2.5rem;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .right {
    width: 25vw;
    height: 100%;
    font-size: 1.2rem;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 2vw;
  }
}
.main {
  height: 100%-@topHeight;
  width: 100%;
  position: relative;
  overflow: hidden;
  .left,
  .middle,
  .right {
    display: inline-block;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
  }
  .left,
  .right {
    width: 25vw;
  }
  .middle {
    width: 50vw;
  }
}
</style>
